<template>
  <a-card class="general-card" :title="props.title">
    <a-grid :cols="24" :col-gap="24" :row-gap="24">
      <a-grid-item :span="6" v-for="(item, idx) in props.renderData">
        <a-card>
          <div class="flex">
            <a-statistic :title="item.title" :value="item.count" show-group-separator :value-from="0" :precision="item.count % 1 == 0 ? 0 : 2" animation>
              <template #prefix>
                <span
                  class="statistic-prefix"
                  :style="{
                    background: idx % 2 == 0 ? '#FFE4BA' : idx % 3 == 0 ? '#E8FFFB' : '#E8F3FF',
                  }"
                >
                  <component
                    :is="idx % 2 == 0 ? 'icon-common' : idx % 3 == 0 ? 'icon-common' : 'icon-common'"
                    :style="{
                      color: idx % 2 == 0 ? '#F77234' : idx % 3 == 0 ? '#33D1C9' : '#165DFF',
                    }"
                  />
                </span>
              </template>
            </a-statistic>
          </div>
        </a-card>
      </a-grid-item>
    </a-grid>
  </a-card>
</template>

<script lang="ts" setup>
interface Data {
  title: string
  count: any
  prefix: {
    icon: string
    background: string
    iconColor: string
  }
}
const props = defineProps<{
  renderData: Data[]
  title: string
}>()
</script>

<style scoped lang="less">
:deep(.arco-statistic-value-decimal) {
  margin-left: 0 !important;
}
:deep(.arco-statistic) {
  width: 100%;
  .arco-statistic-title {
    color: rgb(var(--gray-10));
    font-weight: bold;
  }
  .arco-statistic-content {
    display: flex;
    width: 100%;
    flex: 1;
  }
  .arco-statistic-value {
    display: flex;
    margin: auto;
    span {
      margin: auto auto auto 20px;
    }
  }
}
.statistic-prefix {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 8px;
  color: var(--color-white);
  font-size: 16px;
  line-height: 32px;
  text-align: center;
  vertical-align: middle;
  border-radius: 6px;
}
</style>
